<template>
    <zx-input v-if="data.type=='Input' 
    || data.type=='Phone' 
    || data.type=='Password' 
    || data.type=='Textarea'" :data="data" @fieldValueChange="$emit('fieldValueChange', data.config.changeFun)"></zx-input>
    <zx-radio v-else-if="data.type=='Radio'" :data="data" @fieldValueChange="$emit('fieldValueChange', data.config.changeFun)"></zx-radio>
    <zx-checkbox v-else-if="data.type=='Checkbox'" :data="data" @fieldValueChange="$emit('fieldValueChange', data.config.changeFun)"></zx-checkbox>
    <zx-select v-else-if="data.type=='Select'" :data="data" ></zx-select>
    <!-- 时间选择 -->
    <zx-datetime v-else-if="data.type=='TimePicker'" type="datetime" :data="data" @fieldValueChange="$emit('fieldValueChange', data.config.changeFun)"></zx-datetime>
    <zx-datetime v-else-if="data.type=='TimePickerMultiple'" type="datetime-range" :data="data" @fieldValueChange="$emit('fieldValueChange', data.config.changeFun)"></zx-datetime>
    <!-- 单日期选择 -->
    <zx-datetime v-else-if="data.type=='DatePicker'" :type="data.config.type" :data="data" @fieldValueChange="$emit('fieldValueChange', data.config.changeFun)"></zx-datetime>
    <!-- 日期范围选择 -->
    <zx-datetime v-else-if="data.type=='DatePickerMultiple'" type="date-range" :data="data" @fieldValueChange="$emit('fieldValueChange', data.config.changeFun)"></zx-datetime>
    <zx-switch v-else-if="data.type=='Switch'" :data="data" @fieldValueChange="$emit('fieldValueChange', data.config.changeFun)"></zx-switch>
    <zx-rate v-else-if="data.type=='Rate'" :data="data" ></zx-rate>
    <zx-link v-else-if="data.type=='Link'" :data="data" ></zx-link>
    <zx-divider v-else-if="data.type=='Divider'" :data="data" ></zx-divider>
    <zx-uploader v-else-if="data.type=='Uploader'" :businessId="businessId" :data="data"></zx-uploader>
    <zx-input-Number v-else-if="data.type=='InputNumber'" :data="data" ></zx-input-Number>
    <zx-text v-else-if="data.type=='Text'" :data="data" ></zx-text>
    <div v-else class="py-4 px-4 text-red-200">未知表单[{{data.type}}]类型，请联系管理员</div>
</template>
<script>
import zxInput from './input.vue';
import zxRadio from './radio.vue';
import zxCheckbox from './checkbox.vue';
import zxSelect from './select.vue';
import zxDatetime from './datetime.vue';
import zxSwitch from './switch.vue';
import zxRate from './rate.vue';
import zxLink from './link.vue';
import zxDivider from './divider.vue';
import zxUploader from './uploader.vue';
import zxInputNumber from './inputNumber.vue';
import zxText from './text.vue';
export default {
    components:{
        zxInput,
        zxRadio,
        zxCheckbox,
        zxSelect,
        zxDatetime,
        zxSwitch,
        zxRate,
        zxLink,
        zxDivider,
        zxUploader,
        zxInputNumber,
        zxText
    },
    props: {
        data: {
            type: Object,
            required: true
        },
        businessId: String
    },
    mounted() {
        const macro = this.data.config.macro
        if (macro && !this.data.readonly) {
            if (macro.label == this.data.value) {
                this.data.value = this.getMacroValue(macro.value)
            }
        }
    },
    methods:{
        // 宏定义赋值
        getMacroValue(key){
            const user = this.$store.getters.user
            switch(key) {
                case '{{##LoginName##}}':
                    return user.nick;
                case '{{##LoginOrgName##}}':
                    return user.orgName;
                case '{{##CurrentDate##}}':
                    return this.$util.getFormatDate('')
                case '{{##CurrentDateTime##}}':
                    return this.$util.getFormatDate('','yyyy-0m-0d 0h:0f')
            }
        },
    }
}
</script>